<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="styles.css" rel="stylesheet">
</head>

<body>
    <nav class="navbar">
        <img src="images/logo.png" alt="logo" class="logo">
        <ul>
            <li><a class="active" href="javascript:void(0)">首页</a></li>
            <li><a href="javascript:void(0)">关于我</a></li>
            <li><a href="javascript:void(0)">我能做什么</a></li>
            <li><a href="javascript:void(0)">作品集</a></li>
            <li><a href="javascript:void(0)">联系方式</a></li>
        </ul>
    </nav>

    <div>


        <a name="div1"></a>

        <div class="container flex flex-col flex-center" style="background: url('images/p1背景.png') no-repeat center center;background-size: cover;gap: 4rem">
            <div class="flex flex-center h75">
                <img src="images/logo.png" alt="">
            </div>
            <div class="flex flex-center flex-col" style="gap: 2rem">
                <h1 style="font-weight: normal">生活需要细节，设计也是</h1>

                <div onclick="huhuiyu.scrollToView(1)">
                    <div id="divCircles">
                        <div></div>
                        <div></div>
                        <div></div>
                    </div>
                    <div class="slide flex flex-center">
                        <img src="images/下拉框.png" style="width: 70%" alt="下拉框">
                    </div>
                </div>
            </div>
        </div>

        <a name="div2"></a>
        <div class="container flex-center flex flex-col" style="background: url('images/p2背景.png') no-repeat center center;background-size: cover;">
            <div style="width: 60%;">
                <div class="cardhead flex" style="width: 100%">
                    <div class="title" style="margin-bottom: 1rem;">
                        <h1 style="border-bottom: 3px solid black;width: fit-content">关于我</h1>
                        <h2>ABOUT ME</h2>
                    </div>
                    <!-- <span>
                        <label for="m1">&lt;</label>
                    </span> -->
                </div>
                <div class="content">
                    <img src="images/图片.png" alt="" style="padding: 2rem;background: url('images/图片框.png') no-repeat;background-size: cover;width: 30%;height: 100%;">
                    <div class="index" style="flex: 1;display: flex;justify-content: center;">
                        <div>
                            <h3>刘金花</h3>
                            <p>性别：女</p>
                            <p>年龄：19</p>
                            <p>出生日期：2004/06/26</p>
                            <p>兴趣：摄影，绘画，旅游</p>
                        </div>

                    </div>
                    <!-- <div>
                        <input class="menuc" type="checkbox" id="m1">
                        <ul class="menu">
                            <li><a href="#">首页</a></li>
                            <li><a href="#">关于我</a></li>
                            <li><a href="#">我能做什么</a></li>
                            <li><a href="#">作品集</a></li>
                            <li><a href="#">联系方式</a></li>
                        </ul>
                    </div> -->

                </div>
                <div class="desc">
                    我是一个喜欢安静，闷声干大事的女生，我的兴趣很广泛比如画画，旅游，之前从来没有接触过设计，在本次选专业中阴差阳错进入了设计专业，当时的我不愿意，但是当我接触久了之后，发现设计某个东西的过程中会让我静下心来，很认真的去想怎么设计或者搭配，慢慢就喜欢这个专业了，每次出去玩，都能从中找到灵感，而且我注重生活中的细节，所谓细节即设计
                </div>
            </div>
        </div>

        <a name="div3"></a>
        <div class="container flex-center flex flex-col" style="background: url('images/p3背景.png') no-repeat center center;background-size: cover;">
            <div style="width: 60%;">
                <div class="cardhead flex" style="width: 100%">
                    <div class="title" style="margin-bottom: 1rem;">
                        <h1 style="border-bottom: 3px solid black;width: fit-content">我能做什么</h1>
                        <h2>WHAT CAN I DO?</h2>
                    </div>
                    <!-- <span>&lt;</span> -->
                </div>
                <div style="width: 100%;justify-content: space-between;flex-wrap: wrap;gap: 3rem" class="flex">
                    <div class="skill">
                        <img src="images/ps.png" alt="ps">
                        <div class="App">
                            <h3 style="font-weight: normal">PHOTOSHOP</h3>
                            <div class="progressBar" style="background: linear-gradient(to right,#A44735 93%,#DED0AD 93.1%)"></div>
                        </div>
                    </div>
                    <div class="skill">
                        <img src="images/maya.png" alt="ps">
                        <div class="App">
                            <h3 style="font-weight: normal">MAYA</h3>
                            <div class="progressBar" style="background: linear-gradient(to right,#A44735 93%,#DED0AD 93.1%)"></div>
                        </div>

                    </div>
                    <div class="skill">
                        <img src="images/ai.png" alt="ps">
                        <div class="App">
                            <h3 style="font-weight: normal">ADOBE ILLUSTRATOR</h3>
                            <div class="progressBar" style="background: linear-gradient(to right,#A44735 93%,#DED0AD 93.1%)"></div>
                        </div>
                    </div>
                    <div class="skill">
                        <img src="images/cdr.png" alt="ps">
                        <div class="App">
                            <h3 style="font-weight: normal">CORELDRAW</h3>
                            <div class="progressBar" style="background: linear-gradient(to right,#A44735 93%,#DED0AD 93.1%)"></div>
                        </div>
                    </div>
                    <div class="skill">
                        <img src="images/flash.png" alt="ps">
                        <div class="App">
                            <h3 style="font-weight: normal">FLASH</h3>
                            <div class="progressBar" style="background: linear-gradient(to right,#A44735 93%,#DED0AD 93.1%)"></div>
                        </div>
                    </div>
                    <div class="skill">
                        <img src="images/dw.png" alt="ps">
                        <div class="App">
                            <h3 style="font-weight: normal">DREAMWEAVER</h3>
                            <div class="progressBar" style="background: linear-gradient(to right,#A44735 93%,#DED0AD 93.1%)"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <a name="div4"></a>
        <div class="container flex-center flex flex-col" style="background: url('images/p4背景.png') no-repeat center center;background-size: cover;">
            <div style="width: 60%;">
                <div class="cardhead flex" style="width: 100%">
                    <div class="title" style="margin-bottom: 1rem;">
                        <h1 style="border-bottom: 3px solid black;width: fit-content">作品集</h1>
                        <h2>COLLECTIONS</h2>
                    </div>
                    <!-- <span>&lt;</span> -->
                </div>
                <div class="collections">
                    <ul>
                        <li>全部</li>
                        <li>网页设计</li>
                        <li>平面设计</li>
                        <li>模型设计</li>
                        <li>动画设计</li>
                        <li>手绘</li>
                    </ul>
                    <div class="imgs">
                        <img src="images/作品4.png" alt="作品" />
                        <div class="imgcollection">
                            <img src="images/作品1.png" alt="作品" />
                            <img src="images/作品2.png" alt="作品" />
                        </div>
                        <div class="imgcollection">
                            <img src="images/作品7.png" alt="作品" />
                            <img src="images/作品3.png" alt="作品" />
                            <img src="images/作品8.png" alt="作品" />
                        </div>

                        <!--                <img src="images/作品6.png" style="width: 100%" alt="作品" />-->

                    </div>
                </div>
            </div>
        </div>

        <a name="div5"></a>
        <div class="container flex-center flex flex-col" style="background: url('images/p5背景.png') no-repeat center center;background-size: cover;">
            <div class="flex flex-col" style="width: 60%;justify-content: space-between;gap: 1rem">
                <div class="cardhead flex" style="width: 100%">
                    <div class="title" style="margin-bottom: 1rem;">
                        <h1 style="border-bottom: 3px solid black;width: fit-content">联系方式</h1>
                        <h2>CONTACT INFORMATION</h2>
                    </div>
                    <!-- <span>&lt;</span> -->
                </div>
                <div class="contact flex ">
                    <ul>
                        <li>
                            <h3 style="font-weight: normal">QQ: 3208404406</h3>
                        </li>
                        <li>
                            <h3 style="font-weight: normal">电话：13077221259</h3>
                        </li>
                        <li>
                            <h3 style="font-weight: normal">邮箱：3208404406@QQ.COM</h3>
                        </li>
                        <li>
                            <h3 style="font-weight: normal">地址：湖南省常德市白马湖街道</h3>
                        </li>

                    </ul>
                    <img src="images/二维码.png" alt="二维码" style="width: 20%" />
                </div>
            </div>
        </div>

    </div>
    <script type="module" src="./js/index.js"></script>
</body>

</html>